<template>
    <el-dialog
    :model-value="fontShow"
    title="更换字体"
    width="22%"
  >
    
    <div class="center">
      <div class="slider-demo-block">
        <span class="demonstration">选择字体大小</span>
        <el-slider v-model="fontSize" :step="10" show-stops> </el-slider>
    </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,defineProps } from 'vue';

defineProps({
    fontShow: {
        type: Boolean,
        required: true
  }
})

const fontSize = ref(20)
</script>

<style lang="scss" scoped>

.center{
    display: flex;
    justify-content: center;
}
.slider-demo-block{
  width: 100%;
}
</style>